<template>
  <el-dialog title="收费标准细类" :visible.sync="visible" center>
    <el-container>
      <el-main>
        <el-form :label-position="labelPosition" :rules="rules" ref="addChaDetForm" label-width="100px" :model="addChaDetForm">
          <el-row>
            <el-col :xs="10" :sm="10" :lg="10">
              <el-form-item label="收费大类" prop="standard_bigname">
                <el-input v-model="addChaDetForm.standard_bigname" readOnly  />
              </el-form-item>
            </el-col>
            <el-col :xs="3" :sm="3" :lg="3">
              <div>&nbsp;</div>
            </el-col>
            <el-col :xs="10" :sm="10" :lg="10">
              <el-form-item label="收费模式"  prop="standard_model">
                <el-select v-model="addChaDetForm.standard_model" placeholder="请选择" @change = "chargeType">
                  <el-option label="按时"  value="1" selected></el-option>
                  <el-option label="按次"  value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :xs="10" :sm="10" :lg="10">
              <el-form-item label="收费标准" prop="standard_name">
                <el-input v-model="addChaDetForm.standard_name" clearable placeholder="该输入项为必填项"/>
              </el-form-item>
            </el-col>
            <el-col :xs="3" :sm="3" :lg="3">
              <div>&nbsp;</div>
            </el-col>
            <el-col :xs="10" :sm="10" :lg="10">
              <el-form-item label="预付费（元）"  prop="standard_pre">
                <el-input v-model="addChaDetForm.standard_pre" clearable placeholder=""/>
              </el-form-item>
            </el-col>
          </el-row>

           <el-row>
            <el-col :xs="10" :sm="10" :lg="10">
              <el-form-item label="起始时间" prop="standard_stime">
                <el-time-picker
                  style="width: 100%"
                  v-model="addChaDetForm.standard_stime"
                  value-format="hh:mm:ss"
                  placeholder="该输入项为必填项"
                  @blur = "detectStime">
                </el-time-picker>
              </el-form-item>
            </el-col>
            <el-col :xs="3" :sm="3" :lg="3">
              <div>&nbsp;</div>
            </el-col>
            <el-col :xs="10" :sm="10" :lg="10">
              <el-form-item label="结束时间" prop="standard_etime">
                <el-time-picker
                  style="width: 100%"
                  v-model="addChaDetForm.standard_etime"
                  value-format="hh:mm:ss"
                  placeholder="该输入项为必填项"
                  @blur = "detectEtime">
                </el-time-picker>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :xs="10" :sm="10" :lg="10">
              <el-form-item label="小车封顶金额（分）"label-width="150px"  prop="standard_topfee">
                <el-input v-model="addChaDetForm.standard_topfee" clearable />
              </el-form-item>
            </el-col>
            <el-col :xs="3" :sm="3" :lg="3">
              <div>&nbsp;</div>
            </el-col>
            <el-col :xs="10" :sm="10" :lg="10">
              <el-form-item label="大车封顶金额（分）"label-width="150px" prop="standard_bigcartopfee">
                <el-input v-model="addChaDetForm.standard_bigcartopfee" clearable />
              </el-form-item>
            </el-col>
          </el-row>

           <el-row v-if = "tOrn">
            <el-col :xs="10" :sm="10" :lg="10">
              <el-form-item label="小车计时标准（分/时段）"label-width="150px"  prop="standard_st">
                <el-input v-model="addChaDetForm.standard_st" clearable />
              </el-form-item>
            </el-col>
            <el-col :xs="3" :sm="3" :lg="3">
              <div>&nbsp;</div>
            </el-col>
            <el-col :xs="10" :sm="10" :lg="10">
              <el-form-item label="大车计时标准（分/时段）"label-width="150px" prop="standard_bt">
                <el-input v-model="addChaDetForm.standard_bt" clearable />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row v-if = "tOrn">
            <el-col :xs="10" :sm="10" :lg="10">
              <el-form-item label="计费周期（分钟）"label-width="150px"  prop="standard_cycle">
                <el-input v-model="addChaDetForm.standard_cycle" clearable />
              </el-form-item>
            </el-col>
          </el-row>

           <el-row v-if = "!tOrn">
            <el-col :xs="10" :sm="10" :lg="10">
              <el-form-item label="小车计次标准（分/次）"label-width="150px"  prop="standard_sc">
                <el-input v-model="addChaDetForm.standard_sc" clearable />
              </el-form-item>
            </el-col>
            <el-col :xs="10" :sm="10" :lg="10">
              <el-form-item label="大车计次标准（分/次）"label-width="150px"  prop="standard_bc">
                <el-input v-model="addChaDetForm.standard_bc" clearable />
              </el-form-item>
            </el-col>
          </el-row>

        </el-form>
      </el-main>
      <el-footer style="text-align: center">
        <el-button v-if='isCrea' type="primary" @click="submitForm('addChaDetForm')" :loading="addBtn" class="btn-search">确定</el-button>
        <el-button v-else type="primary" @click="updateForm('addChaDetForm')" class="btn-search">确定</el-button>
        <el-button @click="resetForm('addChaDetForm')">重置</el-button>
      </el-footer>
    </el-container>
  </el-dialog>
</template>

<script>
import {
  saveChargeStandardDetail,
  updateChargeStandardDetail
} from "../../../../api/chargeStandard";
//import cloneDeep from "lodash/cloneDeep";
export default {
  name: "chage-standard-add-form",
  props: [
    "detFormVisible",
    "detStandard",
    "detStandardNo",
    "chaDetData",
    "isCrea",
    "timeLimit"
  ],
  data() {
    return {
      addBtn: false,
      visible: false,
      labelPosition: "left",
      tOrn: true, // 按次/按时  是否按时
      addChaDetForm: {
        standard_big: this.detStandardNo, // 收费标准大类编号
        standard_bigname: this.detStandard, // 收费标准大类名称
        standard_model: "", // 收费模式
        standard_name: "", // 收费标准
        standard_pre: "", // 预付费
        standard_stime: "", // 起始时间
        standard_freetime: "", // 免费时长
        standard_etime: "", // 结束时间
        standard_topfee: "", // 小车封顶金额
        standard_bigcartopfee: "", // 大车封顶金额
        standard_st: "", // 小车计时标准
        standard_bt: "", // 大车计时标准
        standard_cycle: "", // 计费周期
        standard_sc: "", // 小车计次标准
        standard_bc: "", //大车计次标准
        standard_id: "" // 收费标准ID
      },
      rules: {
        standard_name: [
          { required: true, message: "请输入收费标准名称", trigger: "blur" }
        ],
        standard_stime: [
          { required: true, message: "请输入开始时间", trigger: "blur" }
        ],
        standard_etime: [
          { required: true, message: "请输入结束时间", trigger: "blur" }
        ],
        standard_st: [
          { required: true, message: "请输入小车计时标准", trigger: "blur" }
        ],
        standard_bt: [
          { required: true, message: "请输入大车计时标准", trigger: "blur" }
        ],
        standard_cycle: [
          { required: true, message: "请输入计费周期", trigger: "blur" }
        ]
      }
      // pickerOptions: {
      //       disabledDate: (time) => {
      //           let start = new Date(Date.parse(this.addChaDetForm.standard_stime));
      //           return time.getTime() <= start;
      //       }
      //   },
    };
  },
  watch: {
    detFormVisible: function(val) {
      this.visible = val;
    },
    visible: function(val) {
      this.$emit("update:detFormVisible", val);
    },
    chaDetData: function(val) {
      this.addChaDetForm = val;
    },
    "addChaDetForm.standard_model": function(val) {
          if (val == 1) {
            this.tOrn = true;
           } else {
           this.tOrn = false;
         }
    },
    // "addChaDetForm.standard_stime": function(val) {
    //   // for (const i of this.timeLimit) {
    //   //   if (i.name != this.addChaDetForm.standard_name) {
    //   //     if (val > i.time[0] || val < i.time[1]) {
    //   //       this.$alert("开始时间与" + i.name + "收费标准的时间段重合", "提示信息", {
    //   //         confirmButtonText: "确定"
    //   //       });
    //   //     }
    //   //   }
    //   // }
    // },
    // "addChaDetForm.standard_etime": function(val) {
    //   if (val < this.addChaDetForm.standard_stime) {
    //     // this.$message({
    //     //   message: "",
    //     //   type: "info"
    //     // });
    //     this.$alert("结束时间不能晚于开始时间", "提示信息", {
    //       confirmButtonText: "确定"
    //     });
    //   }
    // }
  },

  methods: {
    submitForm: function(addChaDetForm) {
      this.$refs[addChaDetForm].validate(valid => {
        if (valid) {
          this.addBtn = true;
          // let data = cloneDeep(this.addChaDetForm);
          saveChargeStandardDetail(this.addChaDetForm).then(res => {
            this.addBtn = false;
            this.$message({
              message: "添加成功",
              type: "success"
            });
            //this.$emit("addChaDetData", data, 1);
            this.$emit("addChaDetData", this.addChaDetForm, 1);
            this.visible = false;
            // this.$refs[addChaDetForm].resetFields();
          });
        } else {
          return false;
        }
      });
    },
    updateForm(addChaDetForm) {
      this.$refs[addChaDetForm].validate(valid => {
        if (valid) {
          this.addBtn = true;
          //let data = cloneDeep(this.addChaDetForm);
          updateChargeStandardDetail(this.addChaDetForm).then(res => {
            this.addBtn = false;
            this.$message({
              message: "修改成功",
              type: "success"
            });
            //this.$emit("addChaDetData", data, 2);
            this.$emit("addChaDetData", this.addChaDetForm, 2);
            this.visible = false;
            //this.$refs[addChaDetForm].resetFields();
          });
        } else {
          return false;
        }
      });
    },
    resetForm(addChaDetForm) {
      this.$refs[addChaDetForm].resetFields();
    },
    chargeType(val) {
      if (val == 1) {
        this.tOrn = true;
      } else {
        this.tOrn = false;
      }
    },
    detectStime() {
      let val = this.addChaDetForm.standard_stime;
      for (const i of this.timeLimit) {
        if (i.name != this.addChaDetForm.standard_name) {
          if (val > i.time[0] && val < i.time[1]) {
            this.$alert(
              "开始时间与“" + i.name + "”收费标准的时间段重合",
              "提示信息",
              {
                confirmButtonText: "确定"
              }
            );
          }
        }
      }
    },
    detectEtime() {
      let end = this.addChaDetForm.standard_etime;
      let start = this.addChaDetForm.standard_stime;
      for (const i of this.timeLimit) {
        if (i.name != this.addChaDetForm.standard_name) {
          // if (end > i.time[0] && end < i.time[1]) {
          //   this.$alert(
          //     "结束时间与" + i.name + "收费标准的时间段重合",
          //     "提示信息",
          //     {
          //       confirmButtonText: "确定"
          //     }
          //   );
          // }
          if (start < i.time[0] && end > i.time[0] ) {
              this.$alert(
              "结束时间与“" + i.name + "”收费标准的时间段重合",
              "提示信息",
              {
                confirmButtonText: "确定"
              }
            );
          }
        }
      }

      if (end < start) {
        // this.$message({
        //   message: "",
        //   type: "info"
        // });
        this.$alert("结束时间不能晚于开始时间", "提示信息", {
          confirmButtonText: "确定"
        });
      }
    }
  }
};
</script>

<style scoped>
</style>
